<template>
  <div>
    <main>
      <div class="title">
        <div class="bt">我的作业本</div>
        <div class="tips">
          您好，开通“作业本会员权限”请去首页“一对一课程”进行购买报名，如有疑问，请联系客服人员!
        </div>
      </div>
      <div>
        <WorkItem
          @updateList="updateList"
          :list="todayWorkList"
          @nodone="nodone"
        ></WorkItem>
      </div>
    </main>
  </div>
</template>

<script>
import WorkItem from './workitem'
import { sendPost } from "@/utils/http";
import api from "@/config/api";
export default {
  components: {
    WorkItem
  },
  data () {
    return {
      searchDate: '',
      todayWorkList: [], // 今日作业本
      total: 0
    }
  },
  created () {
    this.getDate()
    this.getTodayWorkList()
  },
  methods: {
    updateList () {
      this.getTodayWorkList()
    },
    nodone () {
      this.$msg.info('请将答案填写完整!')
    },
    // 获取作业本
    getTodayWorkList () {
      console.log(JSON.parse(sessionStorage.getItem('userInfo')).id);
      let uid = JSON.parse(sessionStorage.getItem('userInfo')).id
      sendPost(api.getTodayWorkList, {
        page: 1,
        rows: 20,
        userId: uid,
        date: this.searchDate
      }).then(res => {
        console.log(res);
        this.todayWorkList = res.data
        this.total = res.data.length
        sessionStorage.setItem('total', res.data.length)
      })
    },
    getDate () {
      var date = new Date(Date.now());//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = (date.getDate() - 1) > 9 ? (date.getDate() - 1) : '0' + (date.getDate() - 1);
      let h = date.getHours() + ':';
      let m = date.getMinutes() + ':';
      let s = date.getSeconds();
      let newDate = Y + M + D;//时分秒可以根据自己的需求加上
      // console.log(newDate);
      this.searchDate = newDate
      // console.log(this.searchDate);
    },
    openMembership () {
      this.$router.push('toVip')
    }
  },
}
</script>

<style lang="less" scoped>
.tips {
  font-size: 12px;
  color: #ff5e4e;
}
main {
  padding: 0 1.25rem;

  .title {
    height: 4rem;
    line-height: 4rem;
    border-bottom: 1px solid #ededed;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 1.25rem;
    margin-bottom: 1.875rem;
    .bt {
      height: 100%;
      color: #333;
      font-weight: bold;
    }
    .btn {
      width: 8.8rem;
      height: 3rem;
      line-height: 3rem;
      text-align: center;
      background-color: #ff5e4e;
      border-radius: 0.625rem;
      color: #fff;
      margin: auto 0;
      cursor: pointer;
    }
  }
  .h60 {
    border: 1px dashed #ff5e4e;
    height: 3.75rem;
    line-height: 3.75rem;
    background-color: #f7f7f7;
    margin-top: 1.875rem;
    display: flex;
    .label {
      height: 100%;
    }
    .tags {
      width: 36.625rem;
    }
    .exe_title {
      width: 35rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #333;
      font-size: 1rem;
      padding-left: 1.25rem;
    }
    .el-tag {
      height: 1.575rem;
      line-height: 1.575rem;
      margin-right: 0.9375rem;
      color: #fff;
      padding: 0 0.375rem;
      border: none;
    }
    .jj-bg {
      background: #ff9b4f;
    }
    .jj-color {
      color: #ff9b4f;
    }
    .lxt-bg {
      background: #7cc3d6;
    }
    .lxt-color {
      color: #7cc3d6;
    }
    .wrong-bg {
      background: #ff5e4e;
    }
    .wrong-color {
      color: #ff5e4e;
    }
    .gpzt-bg {
      background: #13bfbf;
    }
    .gpzt-color {
      color: #13bfbf;
    }
    .lxcs-bg {
      background: #99bbe4;
    }
    .lxcs-color {
      color: #99bbe4;
    }
    .ylx-bg {
      background: #94d0f7;
    }
    .ylx-color {
      color: #94d0f7;
    }
  }
  .desc {
    background: #fffafa;
    border: 1px dotted #ff5e4e;
    padding: 1.875rem;
    font-size: 1.125rem;
    color: #333;
    line-height: 2rem;
    margin-top: 1.25rem;
  }
  .topic {
    font-size: 1.5rem;
    color: #333;
    height: 4.375rem;
    line-height: 4.375rem;
    padding: 0 1.875rem;
  }
  .content {
    padding: 0 1.875rem;
    font-size: 1.125rem;
  }
  .time {
    font-size: 1rem;
    margin-top: 1.25rem;
    margin-bottom: 3.75rem;
    padding: 0 1.875rem;
    span {
      margin-right: 1.875rem;
    }
  }
  .btns {
    display: flex;
    width: 32.875rem;
    margin: auto;
    justify-content: space-between;
    color: #ff5e4e;
    font-size: 1.125rem;
    div {
      width: 10rem;
      height: 3.125rem;
      line-height: 3.125rem;
      text-align: center;
      cursor: pointer;
      border: 0.0625rem solid #ff5e4e;
      border-radius: 0.3125rem;
    }
  }
  .progress {
    margin-top: 1rem;
    height: 1.875rem;
    line-height: 1.875rem;
    font-size: 1rem;
    color: #999;
    .percent {
      color: #ff5e4e;
    }
    /deep/.el-progress-bar__inner {
      background-color: #ff5e4e;
    }
  }
}
</style>
